<template>
  <section class="w1 h1 data-center-wrapper">
    <aside class="data-center-header">
      <div class="header-power-off" @click.stop="loginOut">
        <i class="fa fa-power-off"></i>
      </div>
      <div class="header-title">用电安全大数据监控中心</div>
      <span class="header-sub-title">数据更新日期
        <span class="font-good-time">{{moment().format("YYYY-MM-DD HH:mm")}}</span>
      </span>
    </aside>
    <aside class="data-center-body">
      <div class="data-center-top-block">
        <div class="block-left-container">
          <!-- 电量 -->
          <DianLiang />
          <!-- 分路监控 -->
          <JianKong />
          <!-- 电量排名 -->
          <PaiMing />
        </div>
        <div class="block-right-container bordered">
          <span></span>
          <span></span>
          <span></span>
          <span></span>
          <div class="map-container w1 h1">
            <Map />
            <div class="city-name">
              <h2 class="title">{{defaultTitle}}</h2>
              <p class="subtitle">用电高峰时段<span class="font-good-time">{{cityInfo.peakHour}}</span>
              </p>
            </div>
          </div>
        </div>
        <div class="block-middle-container">
          <ShiShi />
        </div>
      </div>
      <div class="data-center-bottom-block">
        <FenXi />
        <ShiJian />
      </div>
    </aside>
  </section>
</template>
<script>
import { mapGetters, mapActions } from "vuex"
import "@/assets/style/data-center.scss"
import DianLiang from "./DianLiang"
import JianKong from "./JianKong"
import PaiMing from "./PaiMing"
import FenXi from "./FenXi"
import ShiJian from "./ShiJian"
import ShiShi from "./ShiShi"
import Map from "./Map"

import { getVideoCity, getGeoJson } from "@/api"
import { echartOption, provinceList } from "./utils"
import { idMapProvince, idMapCity } from "@/utils/mapConfig"
// 判断当前name是省份还是城市，并且返回对应的code
function findCityName(rname, code) {
  if (rname === "ROLE_PROVINCE") {
    return idMapProvince.find(t => t.code === code).key
  } else {
    let startKey = code.substring(0, 2)
    if (!startKey) {
      return false
    }
    let whichProvince = idMapProvince.find(t => t.code.startsWith(startKey))
      .code
    return idMapCity[whichProvince].find(t => t.code == code).key
  }
}
export default {
  components: { ShiShi, DianLiang, JianKong, PaiMing, FenXi, ShiJian, Map },
  mounted() {
    this.initState()
  },
  computed: {
    ...mapGetters(["userInfo"])
  },
  data() {
    return {
      defaultTitle: null,
      cityInfo: {}
    }
  },
  methods: {
    ...mapActions(["getSingleCity", "logout"]),
    initState() {
      const vm = this
      const { areaId, areaName, areaCode, rname } = vm.userInfo
      this.defaultTitle = areaName
      this.getSingleCity(areaId).then(res => {
        vm.cityInfo = res
      })
      // const key = findCityName(rname, areaCode)
      // getGeoJson(key)
      //   .then(res => {
      //     if (res.code === 200 && !!res.data) {
      //      vm.echarts.registerMap(areaName, res.data)
      //    this.getSingleCity(areaId).then(res => {
      //   vm.cityInfo = res
      // })
      //     }
      //   })
      //   .catch(() => {})
    },
    loginOut() {
      this.$Modal.confirm({
        title: "提示",
        content: "<p>即将退出</p><p>是否继续？</p>",
        onOk: () => {
          this.logout().then(() => {
            this.$Message.info("退出登录")
            setTimeout(() => {
              location.reload()
            }, 300)
          })
        },

        onCancel: () => {
          return false
        }
      })
    }
  }
}
</script>

